import React, { useEffect, useState, useLayoutEffect } from "react";

const Detail = () => {
    const [tulist, settuList] = useState([]);
    const [titlelist, settitleList] = useState('');
    const [context, setContext] = useState('');
    const [secCategoryTemplate,setsecCategoryTemplate] =useState([])
    useLayoutEffect(() => {
        const uid = location.hash.split('#')[1]
        fetch(`https://api.weipaitang.com/wechat/v1.0/sale/mini-detail?__uuri=&_h=2bR%3DkDM6plTkhVVFVTVNpkUsR1drZkVOh2VSRFbwM2cx02Voek&_a=&saleUri=${uid}&sc=&sfuu=&t=1645254404032&transData=WPT_recall%3ApublicDefault%2Crank%3AdeepfmV10%2Ctype%3AsecCate_recall%3Acfv28%2Crank%3AdeepfmV10%2Ctype%3AsecCate_home_d2ffe508d7414805A22126A22231A8fmg9e&r=discovery`)
            .then(res => res.json())
            .then(data => {
                console.log(data.data.sale.title);
                console.log(data.data.sale);
                
                settuList(data.data.sale.imgList);
                settitleList(data.data.sale.title);
                setContext(data.data.sale.content);
                setsecCategoryTemplate(data.data.sale.secCategoryTemplate)
            })
    }, [])

    const boxImg = () => {
        return tulist.map((item: any, index: any) => {
            return (
                <div key={index}>
                    <img src={item} alt="" />
                </div>
            )
        })
    }
    console.log(tulist);
  
    const guige = () =>{
        return secCategoryTemplate.map((item:any,index) =>{
            return(
                <div key={index}>
                   <p> {item.typeName} :{item.value}</p>
                </div>
            )
        })
    }

    return (
        <>
        
        {titlelist}
        {context}
        {boxImg()}
        {guige()}
        </>
    )
}

export default Detail